<template>
  <div class="time-demo">
    <h2>时间选择器演示</h2>

    <div class="demo-section">
      <h3>基础时间选择</h3>
      <div class="demo-item">
        <label>选择时间:</label>
        <TimeSelectComponent v-model="basicTime" placeholder="请选择时间" />
        <span>当前值: {{ basicTime || "未选择" }}</span>
      </div>

      <div class="demo-item">
        <label>包含秒数:</label>
        <TimeSelectComponent v-model="timeWithSeconds" :showSeconds="true" />
        <span>当前值: {{ timeWithSeconds || "未选择" }}</span>
      </div>
    </div>

    <div class="demo-section">
      <h3>时间段选择</h3>
      <div class="demo-item">
        <label>工作时间:</label>
        <TimeSelectComponent
          v-model="workTime"
          :isRange="true"
          startPlaceholder="开始时间"
          endPlaceholder="结束时间"
        />
        <div class="time-range-display">
          <p>开始: {{ workTime?.[0] || "未选择" }}</p>
          <p>结束: {{ workTime?.[1] || "未选择" }}</p>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>禁用状态</h3>
      <div class="demo-item">
        <label>禁用状态:</label>
        <TimeSelectComponent
          v-model="disabledTime"
          :disabled="true"
          placeholder="已禁用"
        />
      </div>
    </div>

    <div class="demo-section">
      <h3>数据预览</h3>
      <div class="data-card">
        <p>基础时间: {{ basicTime || "未设置" }}</p>
        <p>含秒时间: {{ timeWithSeconds || "未设置" }}</p>
        <p>工作时间: {{ formatRange(workTime) }}</p>
        <p>禁用时间: {{ disabledTime || "未设置" }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import TimeSelectComponent from "@/components/form/timeSelect.vue";

export default {
  name: "TimeDemo",
  components: {
    TimeSelectComponent,
  },
  data () {
    return {
      basicTime: "",
      timeWithSeconds: "",
      workTime: [],
      disabledTime: "12:00",
    };
  },
  methods: {
    formatRange (range) {
      if (!range || !Array.isArray(range)) return "未设置";
      return `${range[0] || "未设置"} - ${range[1] || "未设置"}`;
    },
  },
};
</script>

<style lang="less" scoped>
.time-demo {
  padding: 20px;

  h2 {
    color: #333;
    margin-bottom: 30px;
    text-align: center;
  }

  .demo-section {
    margin-bottom: 40px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    h3 {
      color: #666;
      margin-bottom: 20px;
    }

    .demo-item {
      display: grid;
      grid-template-columns: 100px 1fr 1fr;
      align-items: center;
      gap: 20px;
      margin-bottom: 15px;

      label {
        font-size: 14px;
        color: #555;
      }

      span {
        font-size: 14px;
        color: #666;
      }

      .time-range-display p {
        margin: 4px 0;
        font-size: 14px;
        color: #666;
      }
    }
  }

  .data-card {
    background: #f5f7ff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #d1e5ff;

    p {
      margin: 8px 0;
      color: #666;
    }
  }
}
</style>
